<template>
  <div class="q-pa-md q-gutter-sm">
    1
    <t-breadcrumbs separator="---" class="text-orange" active-color="secondary">
      <t-breadcrumbs-el icon="home" />
      <t-breadcrumbs-el label="Components" icon="widgets" />
      <t-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
    </t-breadcrumbs>
2
    <t-breadcrumbs class="text-grey" active-color="purple">
      <template v-slot:separator>
        <t-icon size="1.2em" name="arrow_forward" color="purple" />
      </template>

      <t-breadcrumbs-el label="Home" icon="home" />
      <t-breadcrumbs-el label="Components" icon="widgets" />
      <t-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
    </t-breadcrumbs>
3
    <t-breadcrumbs class="text-brown">
      <template v-slot:separator>
        <t-icon size="1.5em" name="chevron_right" color="primary" />
      </template>

      <t-breadcrumbs-el label="Home" icon="home" />
      <t-breadcrumbs-el label="Components" icon="widgets" />
      <t-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
    </t-breadcrumbs>
  </div>
</template>
